<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贡献资源</title>
    <link rel="stylesheet" href="/src/css/base.css">
    <script src="/src/js/ajax.js"></script>
    <script src="/src/js/base.js"></script>
    <style>
        #form{
            width: 640px;
            margin: 0 auto;
        }
        button:disabled{
            background-color: #eee;
            color: darkgray;
            border-width: 0;
            cursor: not-allowed;
        }
        .prog{
            margin: 30px 0;
            position: relative;
            transform: rotateY(90deg) translateY(-80px);
            border-radius: 50%;
            opacity: 0;
            transition: all 1s;
        }
        .prog.active{
            border-radius: 0%;
            transform: rotateY(0deg);
            opacity: 1;
        }
        .prog img{
            width: 64px;
            height: 64px;
            position: absolute;
            top: -20px;
            left: -5%;
            transition: all 0.3s;
        }
        .prog-track{
            background-color: #eee;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 5px 5px 10px 0px darkgray;
        }
        .prog-bar{
            height: 32px;
            background-color: rgb(101, 204, 230);
            width: 0%;
            transition: all 0.3s;
        }
    </style>
</head>
<body>
    <div id="app" class="app">
        <h1>资源贡献(实验性功能)</h1>
        <h4>说明</h4>
        <ol>
            <li>资源路径以'/'开头，'/'即为<a target="_blank" href="/">根目录</a>，例：/Adobe/CC2020 表示该资源要被上传到/Adobe/CC2020下</li>
            <li>通过文件浏览页面（如：<a href="/public/%E5%AD%A6%E4%B9%A0%E8%B5%84%E6%96%99/%E8%BD%AF%E8%80%83" target="_blank">点我</a>）打开“资源贡献”，会自动填写文件浏览页面的资源路径</li>
            <li>文件不建议过大，上传失败无法续传</li>
            <li>有害文件会被拒收</li>
            <li>资源路径分类不正确可能会被管理员重定向或拒收</li>
            <li>资源路径正确但不存在时，文件通过审核后，目录会被自动创建</li>
        </ol>
        <form id="form" onsubmit="return upload()">
            <div class="form-item">
                <div class="input-group active">
                    <span for="">资源路径</span>
                    <input name="path" type="text">
                </div>
            </div>
            <div class="form-item">
                <div class="input-group">
                    <span for="">文件描述(有关键词即可)</span>
                    <input name="file_describe" type="text">
                </div>
                <div class="input-group" style="flex-grow: 1;">
                    <span for="">Email(用于接收审核结果)</span>
                    <input name="email" type="text">
                </div>
            </div>
            <div class="form-item">
                <label for="">文件</label>
                <input name="file" type="file">
            </div>
            <div class="form-item" style="margin-top: 50px;">
                <button id="btn" class="primary">立即上传</button>
            </div>
            <div class="prog">
                <img id="aej" src="/src/imgs/bg/奥尔加BB车.gif" alt="">
                <div class="prog-track">
                    <div class="prog-bar" id="prog"></div>
                </div>
            </div>
        </form>
    </div>
    <script>
        var uri = getQueryString("uri")
        if(uri == ""){
            uri = "/"
        }
        document.getElementsByName("path")[0].value =decodeURI(uri)
        function upload(){
            var btn = document.getElementById("btn")
            var aej = document.getElementById("aej")
            var prog = document.getElementById("prog")
            var fd = new FormData(document.getElementById("form"))
            if( fd.get("file_describe") == '' || fd.get("email") == ''){
                $alert("提示","有字段未填写")
                return false
            }
            btn.setAttribute("disabled",'')
            prog.parentElement.parentElement.classList.add("active")


            $ajax("POST","/api/Contribute/upload",fd,(res)=>{
                prog.innerText = ""
                prog.parentElement.parentElement.classList.remove("active")
                prog.style.width = 0
                btn.removeAttribute("disabled")
                aej.style.left = "-5%"
                var data = res.data;
                if(data.status == 1){
                    $alert("提示","上传成功！请耐心等待管理员审核",()=>{
                        location.reload()
                    })
                }else{
                    if(data.status != undefined){
                        $alert("提示","上传失败！代码：" + data.status + "<p>" + "服务器提示：" + data.msg + "</p>")
                    }else if(data.errors != undefined){
                        var fields = []
                        for (const key in data.errors) {
                            fields.push(key)
                        }
                        $alert("提示","上传失败！字段：" + fields + "</p><br><p>服务器提示：" + data.message + "</p>")
                    }
                }
            },null,(e)=>{
                let ratio = (e.loaded / e.total)*100
                aej.style.left = ratio-5+'%'
                prog.style.width = ratio +'%'
                prog.innerHTML = "<span style='width:100%;text-align:center;display:inline-block'>" + (ratio != 100 ? Math.round(ratio) + '%' : "服务器处理中...") + "</span>"
            });
            return false
        }
    </script>
</body>
</html>
